<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueDemo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <style>
        .demo-alert-box {
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 16px;
            background-color: firebrick;
        }

        .list-item {
            display: inline-block;
            margin-right: 10px;
        }

        .list-enter-active,
        .list-leave-active {
            transition: all 1s;
        }

        /* .list-leave-active for below version 2.1.8 */
        .list-enter,
        .list-leave-to {
            opacity: 0;
            transform: translateY(30px);
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:title='date'>
            {{ message }}
        </div>
        <div v-for='item in todos'>
            <span>
                {{ item.text }}
            </span>
        </div>
        <div id="watch-example">
            <p>
                Ask a yes/no question:
                <input v-model="question" v-focus>
            </p>
            <p>{{ answer }}</p>
            <img style="width: 100%;" v-bind:src="imgUrl" alt="" srcset="">
            <img style="width: 100%;" v-bind:src="localImgUrl" alt="" srcset="">
        </div>
        <div>{{ searchText }}</div>
        <myinput v-model="searchText"></myinput>
        <alert-box>Something bad happened.</alert-box>
        <base-input v-model="username" required placeholder="Enter your username"></base-input>
        <div id="list-demo" class="demo">
            <button v-on:click="tranAdd">Add</button>
            <button v-on:click="tranRemove">Remove</button>
            <transition-group name="list" tag="p">
                <span v-for="item in transItems" v-bind:key="item" class="list-item">
                    {{ item }}
                </span>
            </transition-group>
        </div>
        <div v-demo="{ color: 'white', text: 'hello!' }"></div>
        <anchored-heading :level="anchoredLevel">test</anchored-heading>
        <functional-component></functional-component>
    </div>
    <script>
        const mixin = {
            data() {
                return {
                    mixinMessage: 'This is a mixin message.'
                }
            },
            created() {
                console.log('This is mixin created.')
            },
            methods: {
                getAnswer() {
                    console.log('This is mixin getAnswer.')
                },
                mixinFunc() {
                    console.log('This is mixin function.')
                }
            }
        }
        Vue.component('myinput', {
            props: ['value'],
            template: `
                <input
                    v-bind:value="value"
                    v-on:input="$emit('input', $event.target.value)"
                >
            `
        })
        Vue.component('alert-box', {
            template: `
            <div class="demo-alert-box">
                <strong>Error!</strong>
                <slot></slot>
            </div>
            `
        })
        Vue.component('base-input', {
            inheritAttrs: true,
            props: ['label', 'value'],
            template: `
                <label>
                {{ label }}
                <input
                    v-bind="$attrs"
                    v-bind:value="value"
                    v-on:input="$emit('input', $event.target.value)"
                >
                </label>
            `
        })
        Vue.component('anchored-heading', {
            render: function(createElement) {
                return createElement('h' + this.level, this.$slots.default)
            },
            props: {
                level: {
                    type: Number,
                    required: true
                }
            }
        })
        Vue.component('functional-component', {
            functional: true,
            props: {
                name: {
                    type: String,
                    default: 'This is a functional component.'
                },
                count: {
                    type: Number,
                    default: 1
                }
            },
            render(createElement, context) {
                console.log(context)
                return createElement('p', context.props.name)
            }
        })
        var vue = new Vue({
            el: '#app',
            mixins: [mixin],
            data: {
                message: 'Hello vue.',
                date: new Date().toLocaleString(),
                todos: [{
                        text: '学习 JavaScript'
                    },
                    {
                        text: '学习 Vue'
                    },
                    {
                        text: '整个牛项目'
                    }
                ],
                imgUrl: '',
                question: '',
                answer: 'I cannot give you an answer until you ask a question!',
                searchText: '',
                username: 'init',
                transItems: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                transNextNum: 10,
                anchoredLevel: 3,
                localImgUrl: '',
                localIcon: [
                    './img/avator.jpg',
                    './img/bar.jpg'
                ],
                iconIndex: 0
            },
            directives: {
                focus: {
                    bind() {
                        console.log('bind: ', arguments)
                    },
                    inserted(el) {
                        el.focus()
                    },
                    update() {
                        console.log('update: ', arguments)
                    }
                },
                demo: function(el, binding) {
                    console.log('demo: ', binding.value.color, binding.value.text)
                }
            },
            watch: {
                // 如果 `question` 发生改变，这个函数就会运行
                question: function (newQuestion, oldQuestion) {
                    this.answer = 'Waiting for you to stop typing...'
                    this.debouncedGetAnswer()
                },
                username: {
                    handler: 'listenerUsername',
                    immediate: true
                }
            },
            mounted() {
                console.log('mounted doc: ', document.getElementById('app'))
            },
            created: function () {
                // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
                // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
                // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
                // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
                // 请参考：https://lodash.com/docs#debounce
                this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
                console.log(this.mixinMessage)
                console.log('created doc: ', document.getElementById('app'))
            },
            methods: {
                getAnswer: function () {
                    if (this.question.indexOf('?') === -1) {
                        this.answer = 'Questions usually contain a question mark. ;-)'
                        return
                    }
                    this.answer = 'Thinking...'
                    var vm = this
                    axios.get('https://yesno.wtf/api')
                        .then(function (response) {
                            console.log(response.data)
                            vm.answer = _.capitalize(response.data.answer)
                            vm.localImgUrl = vm.localIcon[vm.iconIndex]
                            vm.iconIndex = vm.iconIndex === 1 ? 0 : 1
                            vm.imgUrl = response.data.image
                        })
                        .catch(function (error) {
                            vm.answer = 'Error! Could not reach the API. ' + error
                        })
                },
                listenerUsername(n, o) {
                    console.log('new: ' + n, ', old: ' + o)
                },
                tranRandomIndex: function () {
                    return Math.floor(Math.random() * this.transItems.length)
                },
                tranAdd: function () {
                    this.transItems.splice(this.tranRandomIndex(), 0, this.transNextNum++)
                },
                tranRemove: function () {
                    this.transItems.splice(this.tranRandomIndex(), 1)
                }
            }
        })
    </script>
</body>

</html>